<!--
 * @Description: spin 加载动画， 在src/libs/directive/modules 中 spin指令  v-spin
 * @Author bianpengfei
 * @create 2021/5/14 23:33
 -->
<template>
  <div class="spin-wrap" :style="{ zIndex }">
    <template v-if="_loading">
      <div class="spin-popper">
        <div v-if="type == 'dot'" :class="['spinner-dot', `spinner-dot--${size}`]">
          <i v-for="item in 4" :key="item"></i>
        </div>

        <div v-else-if="type == 'rect'" :class="['spinner-rect', `spinner-rect--${size}`]">
          <div class="cube1"></div>
          <div class="cube2"></div>
        </div>

        <svg v-else-if="type == 'circle'" viewBox="25 25 50 50" :class="['spinner-circle', `spinner-circle--${size}`]">
          <circle cx="50" cy="50" r="20" fill="none" class="path-background path"></circle>
          <circle cx="50" cy="50" r="20" fill="none" class="path-loading path"></circle>
        </svg>

        <svg
          v-else-if="type == 'circular'"
          viewBox="25 25 50 50"
          :class="['spinner-circular', `spinner-circular--${size}`]"
        >
          <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
        </svg>

        <div v-if="showLoadingText" :class="['loading__text', `loading__text--${size}`]">{{ loadingText }}</div>
      </div>
    </template>
    <div :class="{ 'spin-container': true, 'spin-popper--blur': _loading }">
      <slot ref="slot"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Spin',
  props: {
    loading: {
      type: Boolean,
      default: true
    },
    zIndex: {
      type: Number,
      default: 10
    },
    type: {
      type: String,
      default: 'dot' // 可选值 dot rect circle circular
    },
    size: {
      type: String, // 可选值 default small large
      default: 'default'
    },
    loadingText: {
      type: String,
      default: '加载中...'
    },
    showLoadingText: {
      type: Boolean,
      default: true
    },
    delay: {
      type: Number,
      default: 20
    }
  },

  data() {
    return {
      load: false
    }
  },

  computed: {
    _loading() {
      return this.loading && this.load
    }
  },

  mounted() {
    setTimeout(() => {
      this.load = true
    }, this.delay)
  }
}
</script>

<style scoped lang="scss">
@import './index';
</style>
